MANVIA BLOGWorking on screen
-
View 1 : Login
1. minimal code
screens/login.dart
Output@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', home: Scaffold( backgroundColor: Colors.yellow, body: SafeArea( child: Column( ) ), ), ); } 
2. show app bar
add app bar
appBar: AppBar(title: const Text("My App Title")),
output@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', home: Scaffold( backgroundColor: Colors.yellow, appBar: AppBar(title: const Text("My App Title")), // added new line body: SafeArea( child: Column( ) ), ), ); } 
3. add children for adding multiple widgets
@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', home: Scaffold( backgroundColor: Colors.yellow, appBar: AppBar(title: const Text("Update Store Name")), body: SafeArea( child: Column( children: [ ] ) ), ), ); } 4. add multiple widgets
Let us add textfield
TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), fillColor: Colors.white, filled: true, labelText: 'Password', hintText: 'Enter Password', ), ), @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', home: Scaffold( backgroundColor: Colors.yellow, appBar: AppBar(title: const Text("My App Title")), body: SafeArea( child: Column( children: [ TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), fillColor: Colors.white, filled: true, labelText: 'Password', hintText: 'Enter Password', ), ), TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), fillColor: Colors.white, filled: true, labelText: 'Password', hintText: 'Enter Password', ), ), ] ) ), ), ); } We added two child widgets RoundedInput
output
5. apply sorrounding paddings
1. padding: EdgeInsets.all(24), is applied for padding
2. padding: parameter is not member of Column() or children()
3. So we need to use Container() or Padding()
let us add container() or padding()
Container( ), Padding( padding: EdgeInsets.all(24), ), @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', home: Scaffold( backgroundColor: Colors.yellow, appBar: AppBar(title: const Text("My App Title")), body: SafeArea( child: Column( children: [ Container( ), Padding( padding: EdgeInsets.all(24), ), ] ) ), ), ); } Next let us add textfields into the container() or padding()
@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', home: Scaffold( backgroundColor: Colors.yellow, appBar: AppBar(title: const Text("My App Title")), body: SafeArea( child: Column( children: [ Container( child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Username', hintText: 'Enter Username', ), ), ), Padding( padding: EdgeInsets.all(15), child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Password', hintText: 'Enter Password', ), ), ), ] ) ), ), ); } added Container() and Padding()
output
Note that, First inputbox doesn't have padding. But second have padding Let us add padding to container()
output@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', home: Scaffold( backgroundColor: Colors.yellow, appBar: AppBar(title: const Text("My App Title")), body: SafeArea( child: Column( children: [ Container( padding: EdgeInsets.all(15), // added new line child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Username', hintText: 'Enter Username', ), ), ), Padding( padding: EdgeInsets.all(15), child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Password', hintText: 'Enter Password', ), ), ), ] ) ), ), ); } 
6. Add button
Let us add button
ElevatedButton( onPressed: () { }, child: Text('Save'), ), complete code
output@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', home: Scaffold( backgroundColor: Colors.yellow, appBar: AppBar(title: const Text("My App Title")), body: SafeArea( child: Column( children: [ Container( padding: EdgeInsets.all(15), // added new line child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Username', hintText: 'Enter Username', ), ), ), Padding( padding: EdgeInsets.all(15), child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Password', hintText: 'Enter Password', ), ), ), ElevatedButton( onPressed: () { }, child: Text('Save'), ), ] ) ), ), ); } 
7. two col widgets
Let us add two buttons
Row( children: [ ElevatedButton( onPressed: () { }, child: Text('New Account'), ), ElevatedButton( onPressed: () { }, child: Text('Login'), ), ] ) Complete code
output@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', home: Scaffold( backgroundColor: Colors.yellow, appBar: AppBar(title: const Text("My App Title")), body: SafeArea( child: Column( children: [ Container( padding: EdgeInsets.all(15), // added new line child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Username', hintText: 'Enter Username', ), ), ), Padding( padding: EdgeInsets.all(15), child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Password', hintText: 'Enter Password', ), ), ), ElevatedButton( onPressed: () { }, child: Text('Save'), ), Row( children: [ ElevatedButton( onPressed: () { }, child: Text('New Account'), ), ElevatedButton( onPressed: () { }, child: Text('Login'), ), ] ) ] ) ), ), ); } 
Alignment of above buttons are not good Let us add Expanded widget for showing the button in full width of screen
outputRow( children: [ Expanded( child:ElevatedButton( onPressed: () { }, child: Text('New Account'), ), ), Expanded( child:ElevatedButton( onPressed: () { }, child: Text('New Account'), ), ), ] ) 
Note that , No spacing between the buttons Let us add SizedBox(width: 50), for spacing
outputRow( children: [ SizedBox(width: 50), Expanded( child:ElevatedButton( onPressed: () { }, child: Text('New Account'), ), ), SizedBox(width: 50), Expanded( child:ElevatedButton( onPressed: () { }, child: Text('New Account'), ), ), SizedBox(width: 50), ] ) 
-
View 2: Login
Step 1: screen padding & gradiant
body: SafeArea( child: Container( padding: EdgeInsets.all(30), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Colors.green, Colors.blue, ], ), ), ) ), Step 2: add child element to the Container
child: Column( children: [ ] ) Step 3: add child elements
Complete codeSizedBox(height: 20), Image.asset( 'assets/logo.png', // Adjust the path to your Flutter logo image width: 250, // Adjust the width as needed height: 150, // Adjust the height as needed ), Container( child: TextField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: Colors.white), //<-- SEE HERE ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: Colors.yellow), ), labelText: 'Username', hintText: 'Enter Username', ), style: TextStyle(color: Colors.white), ), ), SizedBox(height: 20), Container( child: TextField( obscureText: true, decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: Colors.white), //<-- SEE HERE ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: Colors.yellow), ), labelText: 'Password', hintText: 'Enter Password', ), style: TextStyle(color: Colors.white), ), ), Row( children: [ SizedBox(width: 0), Expanded( child:TextButton( style: TextButton.styleFrom( textStyle: const TextStyle(fontSize: 15), ), onPressed: () {}, child: const Text('New account', style: TextStyle(fontSize: 15, color: Colors.white )), ), ), SizedBox(width: 20), Expanded( child:TextButton( style: TextButton.styleFrom( textStyle: const TextStyle(fontSize: 15), ), onPressed: () {}, child: const Text('Forgot Password', style: TextStyle(fontSize: 15, color: Colors.white )), ), ), SizedBox(width: 0), ] ), ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.red, minimumSize: const Size.fromHeight(40), // NEW ), onPressed: () {}, child: const Text( 'Login', style: TextStyle(fontSize: 18, color: Colors.white, ), ), ), body: SafeArea( child: Container( padding: EdgeInsets.all(30), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Colors.green, Colors.blue, ], ), ), child:Column( children: [ SizedBox(height: 20), Image.asset( 'assets/logo.png', // Adjust the path to your Flutter logo image width: 250, // Adjust the width as needed height: 150, // Adjust the height as needed ), Container( child: TextField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: Colors.white), //<-- SEE HERE ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: Colors.yellow), ), labelText: 'Username', hintText: 'Enter Username', ), style: TextStyle(color: Colors.white), ), ), SizedBox(height: 20), Container( child: TextField( obscureText: true, decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: Colors.white), //<-- SEE HERE ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(width: 1, color: Colors.yellow), ), labelText: 'Password', hintText: 'Enter Password', ), style: TextStyle(color: Colors.white), ), ), Row( children: [ SizedBox(width: 0), Expanded( child:TextButton( style: TextButton.styleFrom( textStyle: const TextStyle(fontSize: 15), ), onPressed: () {}, child: const Text('New account', style: TextStyle(fontSize: 15, color: Colors.white )), ), ), SizedBox(width: 20), Expanded( child:TextButton( style: TextButton.styleFrom( textStyle: const TextStyle(fontSize: 15), ), onPressed: () {}, child: const Text('Forgot Password', style: TextStyle(fontSize: 15, color: Colors.white )), ), ), SizedBox(width: 0), ] ), ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.red, minimumSize: const Size.fromHeight(40), // NEW ), onPressed: () {}, child: const Text( 'Login', style: TextStyle(fontSize: 18, color: Colors.white, ), ), ), ] ) ) ), ), -
View 3: Grid view
import 'package:flutter/material.dart'; import 'package:vera/controllers/login_controller.dart'; import 'package:get/get.dart'; class LoginPage extends StatelessWidget { @override final List<String> items = [ 'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', ]; Widget build(BuildContext context) { return GetBuilder<LoginController>( builder: (controller) => Scaffold( body: GridView.count( crossAxisCount: 2, // 2 columns children: List.generate(items.length, (index) { return Card( child: Center( child: Text( items[index], style: TextStyle(fontSize: 24.0), ), ), ); }), ), ) ); } } -
View 4: Stack view
import 'package:flutter/material.dart'; import 'package:vera/controllers/login_controller.dart'; import 'package:get/get.dart'; class LoginPage extends StatelessWidget { @override final List<String> items = [ 'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', ]; Widget build(BuildContext context) { return GetBuilder<LoginController>( builder: (controller) => Scaffold( body: GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 4.0, mainAxisSpacing: 4.0, ), itemCount: items.length, itemBuilder: (context, index) { return Stack( children: [ Card( child: Center( child: Text( items[index], style: TextStyle(fontSize: 24.0), ), ), ), Positioned( top: 0, right: 0, child: IconButton( icon: Icon(Icons.favorite_border), onPressed: () { // Handle icon tap }, ), ), ], ); }, ), ) ); } } -
View 5: List view
import 'package:flutter/material.dart'; import 'package:vera/controllers/login_controller.dart'; import 'package:get/get.dart'; class LoginPage extends StatelessWidget { @override final List<String> items = [ 'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 5', 'Item 5', 'Item 5', 'Item 5', 'Item 5', 'Item 5', 'Item 5', 'Item 5', 'Item 5', 'Item 5', 'Item 5', ]; Widget build(BuildContext context) { return GetBuilder<LoginController>( builder: (controller) => Scaffold( body: ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return Card( child: ListTile( leading: Icon(Icons.star), // Icon on the left title: Text(items[index]), // Text content trailing: IconButton( icon: Icon(Icons.favorite_border), // Icon on the right onPressed: () { // Handle icon tap }, ), ) ); }, ), ) ); } }